<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8">
<title>注册页面_dowebok</title>
<link rel="stylesheet" href="../statics/css/register.css">
<link rel="stylesheet" href="../statics/css/bootstrap.min.css">
</head>

<body style="">
    <div class="container">   
        <div class="row align-items-center">
            <div class="col"></div>
            <div class="col">
                <div class="alert alert-danger text-center invisible" role="alert" style="width: 42rem;">
                    <strong>提示：</strong> <font id="msgId">这里有一些错误，看着就好</font>
                </div>
            </div>
            <div class="col"></div>
        </div>
<div class="login-wrapper open dowebok">
    
    <div class="login-left">
        <img src="../statics/imgs/bg-login.png">
    </div>
    <div>
        <form action="" class="registerForm" style="opacity: 0.7;">
        <div class="h2">注册</div>
        <div class="form-group">
            <input type="text" id="username" placeholder="用户名" name="username">
            <label for="full-name">用户名</label>
    
        </div>
        <div class="form-group">
            <input type="password" id="password" placeholder="密码" name="password">
            <label for="Email">密码</label>
        </div>
        <div class="form-group">
            <input type="password" id="confirmpassword" placeholder="确认密码" name="confirmpassword">
            <label for="Password">确认密码</label>
        </div>
    
        <div class="button-area">
            <a class="reg" href="../views/login.html" target="_blank">取消</a>
            <button class="btn btn-primary" type="button" onclick="jump()">注册</button>
        </div>
    </form>
    </div>
</div>
    </div>
    <script src="../statics/js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="../statics/js/bootstrap.min.js"></script>

    <script>
        function jump() {

            let uid = $('#username').val();
            let pwd = $('#password').val();
            let confirmpwd = $('#confirmpassword').val();


            if (uid.length > 0 && pwd.length > 0 && pwd === confirmpwd) {
                axios({
                    method: 'post',
                    url: '/registerDone',
                    data: $('.registerForm').serialize(),
                }).then(function (res) {

                    res = res.data;
                    console.log(res);
                    if (res.code === 200) {
                        window.location.href = '/login';
                    } else {
                        console.log(uid);
                        console.log(pwd);
                        console.log(confirmpwd);
                        alert_fn(res.msg);
                        console.log(res.msg);
                    }
                }).catch((err) => {
                    alert_fn(err);
                    console.log(err);
                });
            } else {
                alert_fn('用户名、密码不能为空，并且两次密码应该一致');
            }
        }


        function alert_fn(msg) {
            $('#msgId').text(msg);
            $('.alert').removeClass('invisible');
            setTimeout(() => {
                $('.alert').addClass('invisible');
            }, 3000);
        }
    </script>
</body>
</html>